<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DockDoor - Free Alt+Tab and Dock Preview Window Switcher for Mac | Download Now</title>
    <meta name="description"
        content="Transform your Mac workflow with DockDoor's free Alt+Tab switcher & dock previews. Privacy-first, open-source window management. Download instantly!">
    <meta name="keywords"
        content="free mac app, alt tab mac, window switcher macOS, dock previews, mac productivity app, option tab, macOS window management, free productivity software, mac utilities, window switcher free, alt tab for mac, dock window preview, mac workflow, productivity tools mac">
    <meta property="og:title" content="DockDoor - Free Alt+Tab and Dock Preview Window Switcher for Mac">
    <meta property="og:description"
        content="Transform your Mac workflow with DockDoor's free Alt+Tab switcher & dock previews. Privacy-first, open-source window management. Download instantly!">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://dockdoor.net">
    <meta property="og:image" content="/DockDoor/Assets.xcassets/AppIcon.appiconset/DockDoor.png">
    <link rel="canonical" href="https://dockdoor.net">
    <link rel="icon" href="/DockDoor/Assets.xcassets/AppIcon.appiconset/DockDoor.png">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    
    <!-- Structured Data -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "DockDoor",
        "description": "Free Alt+Tab window switcher and dock previews for macOS. Privacy-first, open-source window management app.",
        "applicationCategory": "UtilitiesApplication",
        "operatingSystem": "macOS",
        "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "USD"
        },
        "author": {
            "@type": "Organization",
            "name": "DockDoor"
        },
        "downloadUrl": "https://github.com/ejbills/DockDoor/releases/latest/download/DockDoor.dmg",
        "softwareVersion": "Latest",
        "datePublished": "2024",
        "keywords": "mac app, alt tab, window switcher, dock previews, productivity, macOS utilities",
        "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "5.0",
            "ratingCount": "100+"
        }
    }
    </script>
</head>

<body>
    <!-- Header -->
    <header id="header">
        <div class="container header-container">
            <a href="#" class="logo">
                <img src="/DockDoor/Assets.xcassets/AppIcon.appiconset/DockDoor.png" alt="DockDoor Logo">
                <span class="logo-text" data-text="DockDoor">DockDoor</span>
            </a>
            <nav>
                <ul class="nav-links">
                    <li><a href="#features" class="nav-link">Features</a></li>
                    <li><a href="#privacy" class="nav-link">Privacy</a></li>
                    <li><a href="donate.html" class="nav-link">Donate</a></li>
                    <li><a href="#faq" class="nav-link">FAQ</a></li>
                </ul>
            </nav>
            <div class="header-actions">
                <a href="#download" class="btn btn-primary">Download</a>
                <button class="mobile-menu-btn" id="mobile-menu-btn" aria-label="Toggle mobile menu">☰</button>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero section" id="home">
        <div class="container">
            <div class="hero-content">
                <div class="privacy-badge">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M8 1l5.5 2.5v4c0 3.5-2.4 6.8-5.5 7.5C4.9 14.3 2.5 11 2.5 7.5v-4L8 1z"/>
                    </svg>
                    <span>Privacy First • Community Funded</span>
                </div>
                <h1 class="hero-title">The window experience Mac deserves</h1>
                <h2 class="hero-subtitle">Effortless Alt+Tab switching and dock previews that respect your privacy. No data collection. No cloud sync. Just pure productivity.</h2>
                
                <div class="privacy-highlights">
                    <span class="privacy-highlight">100% Local Processing</span>
                    <span class="privacy-highlight">No Data Collection</span>
                    <span class="privacy-highlight">Native Performance</span>
                </div>

                <div class="hero-actions">
                    <a href="#download" class="btn btn-primary btn-large">Get It Now</a>
                    <a href="#features" class="btn btn-secondary">See Features</a>
                    <a href="https://discord.gg/TZeRs73hFb" class="btn btn-outline">Discord</a>
                    <a href="https://github.com/ejbills/DockDoor" class="btn btn-outline">GitHub</a>
                </div>

                <div class="support-callout">
                    <p>🚀 Built by a solo developer. <a href="donate.html" class="support-link">Support development</a></p>
                </div>
            </div>
            
            <div class="hero-visual">
                <div class="hero-image-container">
                    <img src="/resources/dockdoorHero.png" alt="DockDoor window management interface" class="hero-image">
                    <div class="hero-glow"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- Press Reviews Section -->
    <section class="press-section section">
        <div class="container">
            <h2 class="section-title">What people are saying.</h2>
        </div>
        <div class="press-carousel">
            <div class="press-track">
                <div class="press-item">
                    <p class="press-quote">"This is a great way to jump to a particular window without having to hunt it down with the mouse."</p>
                    <p class="press-attribution">— Lifehacker</p>
                    <img class="press-icon" src="./resources/svg/reviewDoubleQuotes.svg" alt="Double quotes icon">
                </div>
                <div class="press-item">
                    <p class="press-quote">"I wish I had found this app much earlier, because it would have saved me a lot of frustration in figuring out which of the 10 open windows in Safari has the tab I'm looking for."</p>
                    <p class="press-attribution">— Medium</p>
                    <img class="press-icon" src="./resources/svg/reviewDoubleQuotes.svg" alt="Double quotes icon">
                </div>
                <div class="press-item">
                    <p class="press-quote">"I can see what's going on with the app much better, which helps my workflow."</p>
                    <p class="press-attribution">— GroovyPost</p>
                    <img class="press-icon" src="./resources/svg/reviewDoubleQuotes.svg" alt="Double quotes icon">
                </div>
                <div class="press-item">
                    <p class="press-quote">"If you want an alternative to AltTab that includes previews of your apps when you hover over their icon in the dock, try DockDoor."</p>
                    <p class="press-attribution">— Yahoo</p>
                    <img class="press-icon" src="./resources/svg/reviewDoubleQuotes.svg" alt="Double quotes icon">
                </div>
                <div class="press-item">
                    <p class="press-quote">"The app allows users to manage and interact with application windows on their desktops. It emphasizes ease of use and seamless integration with the macOS environment."</p>
                    <p class="press-attribution">— Mac Treasure</p>
                    <img class="press-icon" src="./resources/svg/reviewDoubleQuotes.svg" alt="Double quotes icon">
                </div>
                <div class="press-item">
                    <p class="press-quote">"In Windows, when you hover over an app on the taskbar, the operating system shows you the open windows for that app, a useful feature missing in macOS until now with the introduction of the free menu bar app DockDoor."</p>
                    <p class="press-attribution">— AppAddict</p>
                    <img class="press-icon" src="./resources/svg/reviewDoubleQuotes.svg" alt="Double quotes icon">
                </div>
                <div class="press-item">
                    <p class="press-quote">"It's free, open-source, and honestly, Apple should have bought this developer out by now."</p>
                    <p class="press-attribution">— Medium</p>
                    <img class="press-icon" src="./resources/svg/reviewDoubleQuotes.svg" alt="Double quotes icon">
                </div>
                <!-- Duplicate for seamless loop -->
                <div class="press-item">
                    <p class="press-quote">"This is a great way to jump to a particular window without having to hunt it down with the mouse."</p>
                    <p class="press-attribution">— Lifehacker</p>
                    <img class="press-icon" src="./resources/svg/reviewDoubleQuotes.svg" alt="Double quotes icon">
                </div>
                <div class="press-item">
                    <p class="press-quote">"I wish I had found this app much earlier, because it would have saved me a lot of frustration in figuring out which of the 10 open windows in Safari has the tab I'm looking for."</p>
                    <p class="press-attribution">— Medium</p>
                    <img class="press-icon" src="./resources/svg/reviewDoubleQuotes.svg" alt="Double quotes icon">
                </div>
                <div class="press-item">
                    <p class="press-quote">"I can see what's going on with the app much better, which helps my workflow."</p>
                    <p class="press-attribution">— GroovyPost</p>
                    <img class="press-icon" src="./resources/svg/reviewDoubleQuotes.svg" alt="Double quotes icon">
                </div>
                <div class="press-item">
                    <p class="press-quote">"If you want an alternative to AltTab that includes previews of your apps when you hover over their icon in the dock, try DockDoor."</p>
                    <p class="press-attribution">— Yahoo</p>
                    <img class="press-icon" src="./resources/svg/reviewDoubleQuotes.svg" alt="Double quotes icon">
                </div>
                <div class="press-item">
                    <p class="press-quote">"The app allows users to manage and interact with application windows on their desktops. It emphasizes ease of use and seamless integration with the macOS environment."</p>
                    <p class="press-attribution">— Mac Treasure</p>
                    <img class="press-icon" src="./resources/svg/reviewDoubleQuotes.svg" alt="Double quotes icon">
                </div>
                <div class="press-item">
                    <p class="press-quote">"In Windows, when you hover over an app on the taskbar, the operating system shows you the open windows for that app, a useful feature missing in macOS until now with the introduction of the free menu bar app DockDoor."</p>
                    <p class="press-attribution">— AppAddict</p>
                    <img class="press-icon" src="./resources/svg/reviewDoubleQuotes.svg" alt="Double quotes icon">
                </div>
                <div class="press-item">
                    <p class="press-quote">"It's free, open-source, and honestly, Apple should have bought this developer out by now."</p>
                    <p class="press-attribution">— Medium</p>
                    <img class="press-icon" src="./resources/svg/reviewDoubleQuotes.svg" alt="Double quotes icon">
                </div>
            </div>
        </div>
    </section>

    <!-- Privacy Section -->
    <section class="privacy-section section" id="privacy">
        <div class="container">
            <div class="privacy-content">
                <h2 class="privacy-headline">Privacy by Design</h2>
                <p class="privacy-subheadline">Your data stays on your Mac. Always.</p>
                
                <div class="privacy-features">
                    <div class="privacy-feature">
                        <img src="./resources/svg/privacyFeature1.svg" alt="Feature 1" width="72" height="72">
                        <h3 class="privacy-feature-title">100% Local</h3>
                        <p class="privacy-feature-desc">No cloud, no servers, no external connections. Even debug logs stay on your Mac.</p>
                    </div>
                    <div class="privacy-feature">
                        <img src="./resources/svg/privacyFeature2.svg" alt="Feature 2" width="72" height="72">
                        <h3 class="privacy-feature-title">Zero Tracking</h3>
                        <p class="privacy-feature-desc">We don't collect analytics, usage data, or personal information. Not even crash reports.</p>
                    </div>
                    <div class="privacy-feature">
                        <img src="./resources/svg/privacyFeature3.svg" alt="Feature 3" width="72" height="72">
                        <h3 class="privacy-feature-title">Open Source</h3>
                        <p class="privacy-feature-desc">Full transparency. Review our code, contribute, help with translations, or build it yourself.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="features-section section" id="features">
        <div class="container">
            <h2 class="features-headline">Three powerful features.<br>One seamless experience.</h2>
            <p class="features-subheadline">Transform your Mac workflow with intuitive window management</p>
        </div>
        
        <!-- Feature 1: Dock Previews -->
        <div class="feature-section">
            <div class="container">
                <div class="feature-layout">
                    <div class="feature-content">
                        <h3 class="feature-title">Dock Previews</h3>
                        <p class="feature-description">Hover over any dock icon to see live previews of all windows. Click to switch or manage without changing focus.</p>
                    </div>
                    <div class="feature-visual">
                        <video autoplay muted loop playsinline class="feature-video">
                            <source src="/resources/dockpeek.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Feature 2: Alt+Tab Switching -->
        <div class="feature-section feature-section-reverse">
            <div class="container">
                <div class="feature-layout">
                    <div class="feature-content">
                        <h3 class="feature-title">Alt+Tab Switching</h3>
                        <p class="feature-description">Press Option+Tab for Windows-style window switching with live previews. Fast, familiar, and efficient.</p>
                    </div>
                    <div class="feature-visual">
                        <video autoplay muted loop playsinline class="feature-video">
                            <source src="/resources/alttab.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Feature 3: Cmd+Tab Enhancements -->
        <div class="feature-section">
            <div class="container">
                <div class="feature-layout">
                    <div class="feature-content">
                        <h3 class="feature-title">Cmd+Tab Enhancements</h3>
                        <p class="feature-description">Enhance the native macOS Command+Tab experience with richer previews and smoother navigation.</p>
                    </div>
                    <div class="feature-visual">
                        <img src="/resources/cmd-tab-enhancements.png" alt="Cmd+Tab enhancements preview" class="feature-image">
                    </div>
                </div>
            </div>
        </div>
        
        
    </section>


    <!-- Customization Section -->
    <section class="customization-section section">
        <div class="container">
            <h2 class="section-title">Make It Your Own</h2>
            <p class="section-subtitle">Customize DockDoor to match your workflow preferences</p>

            <div class="customization-grid">
                <!-- Window Switcher Variations -->
                <div class="customization-item">
                    <div class="customization-content">
                        <h3 class="customization-title">Window Switcher Layouts</h3>
                        <p class="customization-description">Choose from different visual styles and layouts for your window switcher. Customize the appearance to match your workflow and visual preferences.</p>
                    </div>
                    <div class="customization-slideshow" id="window-switcher-slideshow">
                        <div class="slideshow-track">
                            <div class="slideshow-slide">
                                <img src="/resources/variations/windowswitcher1.png" alt="Window switcher variation 1">
                            </div>
                            <div class="slideshow-slide">
                                <img src="/resources/variations/windowswitcher2.png" alt="Window switcher variation 2">
                            </div>
                        </div>
                        <div class="slideshow-controls">
                            <button class="slideshow-control" data-direction="prev">←</button>
                            <div class="slideshow-indicators">
                                <span class="slideshow-indicator active"></span>
                                <span class="slideshow-indicator"></span>
                            </div>
                            <button class="slideshow-control" data-direction="next">→</button>
                        </div>
                    </div>
                </div>

                <!-- Dock Preview Variations -->
                <div class="customization-item">
                    <div class="customization-content">
                        <h3 class="customization-title">Dock Preview Layouts</h3>
                        <p class="customization-description">Personalize your dock preview experience with different layout options. Adjust spacing, sizing, and arrangement to suit your needs.</p>
                    </div>
                    <div class="customization-slideshow" id="dock-preview-slideshow">
                        <div class="slideshow-track">
                            <div class="slideshow-slide">
                                <img src="/resources/variations/dockpreview1.png" alt="Dock preview layout 1">
                            </div>
                            <div class="slideshow-slide">
                                <img src="/resources/variations/dockpreview2.png" alt="Dock preview layout 2">
                            </div>
                        </div>
                        <div class="slideshow-controls">
                            <button class="slideshow-control" data-direction="prev">←</button>
                            <div class="slideshow-indicators">
                                <span class="slideshow-indicator active"></span>
                                <span class="slideshow-indicator"></span>
                            </div>
                            <button class="slideshow-control" data-direction="next">→</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Settings Section -->
    <section class="settings-section section">
        <div class="container">
            <h2 class="section-title">Extensive Settings</h2>
            <p class="section-subtitle">Customize every aspect of DockDoor to fit your needs</p>

            <div class="settings-grid">
                <div class="settings-card">
                    <h3 class="settings-title">General Settings</h3>
                    <div class="settings-image">
                        <img src="/resources/settings/general.png" alt="General settings panel">
                    </div>
                    <p class="settings-description">Configure startup behavior, hotkeys, and general appearance options.
                    </p>
                </div>

                <div class="settings-card">
                    <h3 class="settings-title">Appearance</h3>
                    <div class="settings-image">
                        <img src="/resources/settings/appearance.png" alt="Appearance settings panel">
                    </div>
                    <p class="settings-description">Customize the look and feel of previews, colors, and visual effects.
                    </p>
                </div>

                <div class="settings-card">
                    <h3 class="settings-title">Filters</h3>
                    <div class="settings-image">
                        <img src="/resources/settings/filters.png" alt="Filters settings panel">
                    </div>
                    <p class="settings-description">Choose which applications and windows show up in previews and
                        Alt+Tab.</p>
                </div>

                <div class="settings-card">
                    <h3 class="settings-title">Support</h3>
                    <div class="settings-image">
                        <img src="/resources/settings/support.png" alt="Support settings panel">
                    </div>
                    <p class="settings-description">Get help, report issues, and learn more about DockDoor.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Mouse Controls Section -->
    <section class="controls-section section">
        <div class="container">
            <h2 class="section-title">Intuitive Controls</h2>
            <p class="section-subtitle">Window controls exactly where you need them</p>
        </div>
        
        <div class="feature-section">
            <div class="container">
                <div class="feature-layout">
                    <div class="feature-content">
                        <h3 class="feature-title">Mouse Controls</h3>
                        <p class="feature-description">DockDoor adds intuitive window controls to each preview. Close, minimize, or maximize windows with just one click, without having to switch focus.</p>
                    </div>
                    <div class="feature-visual">
                        <img src="/resources/dockPeekCommented.png" alt="Window controls in dock previews" class="feature-image">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Keyboard Controls Section -->
    <section class="keyboard-section section" id="keyboard-nav">
        <div class="container">
            <div class="keyboard-content">
                <h2 class="keyboard-headline">Full Keyboard Control</h2>
                <p class="keyboard-subheadline">Navigate and control windows entirely with your keyboard</p>
                
                <div class="keyboard-shortcuts">
                    <div class="shortcut-group">
                        <h3 class="shortcut-title">Navigate</h3>
                        <div class="shortcut-keys">
                            <kbd class="key">Tab</kbd>
                            <kbd class="key">Shift</kbd>
                            <kbd class="key">↑↓←→</kbd>
                        </div>
                        <p class="shortcut-desc">Tab forward, Shift backward, or use arrow keys to navigate through windows</p>
                    </div>
                    
                    <div class="shortcut-group">
                        <h3 class="shortcut-title">Actions</h3>
                        <div class="shortcut-keys">
                            <kbd class="key key-action">Return</kbd>
                            <kbd class="key key-close">⌘W</kbd>
                            <kbd class="key key-quit">⌘Q</kbd>
                            <kbd class="key key-minimize">⌘M</kbd>
                        </div>
                        <p class="shortcut-desc"><span class="action-select">Select</span>, <span class="action-close">close</span>, <span class="action-quit">quit</span>, or <span class="action-minimize">minimize</span> windows</p>
                    </div>
                    
                    <div class="shortcut-group">
                        <h3 class="shortcut-title">Quick Start</h3>
                        <div class="shortcut-keys">
                            <kbd class="key key-primary">Option+Tab</kbd>
                        </div>
                        <p class="shortcut-desc">Open Window Switcher and navigate without touching your mouse</p>
                    </div>
                </div>
                
                <div class="keyboard-workflow">
                    <h3 class="workflow-title">How it works</h3>
                    <div class="workflow-steps">
                        <div class="workflow-step">
                            <span class="step-number">1</span>
                            <span class="step-text">Press <strong>Option+Tab</strong> or hover over dock icons</span>
                        </div>
                        <div class="workflow-step">
                            <span class="step-number">2</span>
                            <span class="step-text">Navigate with <strong>Tab</strong>, <strong>Shift</strong>, or arrow keys</span>
                        </div>
                        <div class="workflow-step">
                            <span class="step-number">3</span>
                            <span class="step-text">Press <strong>Return</strong> to select or use shortcuts</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Special Features Grid -->
    <section class="special-features section" id="features">
        <div class="container">
            <h2 class="section-title">Power Features</h2>
            <p class="section-subtitle">Enhance your workflow with these productivity tools</p>

            <div class="special-features-grid">
                <!-- Media Controls Feature -->
                <div class="special-feature-item">
                    <div class="special-feature-content">
                        <h3 class="special-feature-title">Media Controls & Lyrics</h3>
                        <p class="special-feature-description">Pin music widgets to your screen with synchronized lyrics for Spotify and Apple Music. Transform your media experience with real-time lyric synchronization.</p>
                    </div>
                    <div class="special-feature-media">
                        <video autoplay muted loop playsinline>
                            <source src="/resources/lyrics.mp4" type="video/mp4">
                            Your browser does not support video playback.
                        </video>
                    </div>
                </div>

                <!-- Calendar Feature -->
                <div class="special-feature-item">
                    <div class="special-feature-content">
                        <h3 class="special-feature-title">Calendar Integration</h3>
                        <p class="special-feature-description">Hover over the Calendar app to see all your events for the day. Never miss an appointment with instant calendar previews right from your dock.</p>
                    </div>
                    <div class="special-feature-media">
                        <img src="/resources/calendar.png" alt="Calendar demonstration" class="large-preview-image">
                    </div>
                </div>

                <!-- Enhanced Previews Feature -->
                <div class="special-feature-item">
                    <div class="special-feature-content">
                        <h3 class="special-feature-title">Enhanced Previews</h3>
                        <p class="special-feature-description">Get a better view of your windows with large preview option. Perfect for dealing with multiple similar windows or for users with larger displays.</p>
                    </div>
                    <div class="special-feature-media">
                        <img src="/resources/largePreviewDemo.png" alt="Large preview demonstration" class="large-preview-image">
                    </div>
                </div>

                <!-- CMD Right Click Quit Feature -->
                <div class="special-feature-item">
                    <div class="special-feature-content">
                        <h3 class="special-feature-title">Quick Quit from Dock</h3>
                        <p class="special-feature-description">Quit applications instantly with ⌘ + Right Click on any dock icon. For stubborn apps, use ⌘ + ⌥ + Right Click to force quit. No menus, no waiting—just fast, direct control.</p>
                    </div>
                    <div class="special-feature-media">
                        <video autoplay muted loop playsinline>
                            <source src="/resources/cmdClick.mp4" type="video/mp4">
                            Your browser does not support video playback.
                        </video>
                    </div>
                </div>

                <!-- Middle Click Feature -->
                <div class="special-feature-item">
                    <div class="special-feature-content">
                        <h3 class="special-feature-title">Middle-Click to Close Windows</h3>
                        <p class="special-feature-description">Quickly close windows without switching focus by
                            middle-clicking on their preview. Perfect for cleaning up your workspace while staying in your
                            current application.</p>
                    </div>
                    <div class="special-feature-media">
                        <video autoplay muted loop playsinline>
                            <source src="/resources/middleClick.mp4" type="video/mp4">
                            Your browser does not support video playback.
                        </video>
                    </div>
                </div>

                <!-- Window Dragging Feature -->
                <div class="special-feature-item">
                    <div class="special-feature-content">
                        <h3 class="special-feature-title">Window Dragging</h3>
                        <p class="special-feature-description">Drag and drop windows between applications directly from dock
                            previews. Effortlessly organize your workspace without the need to switch contexts.</p>
                    </div>
                    <div class="special-feature-media">
                        <video autoplay muted loop playsinline>
                            <source src="/resources/windowDrag.mp4" type="video/mp4">
                            Your browser does not support video playback.
                        </video>
                    </div>
                </div>

                <!-- Aero Shake Feature -->
                <div class="special-feature-item">
                    <div class="special-feature-content">
                        <h3 class="special-feature-title">Aero Shake</h3>
                        <p class="special-feature-description">Shake a window preview to instantly minimize or close all other windows. Enable this in Settings → General → Advanced → Interaction and Behavior, then choose your preferred action from the "Dock preview aero shake action" dropdown.</p>
                    </div>
                    <div class="special-feature-media">
                        <video autoplay muted loop playsinline>
                            <source src="/resources/aeroShake.mp4" type="video/mp4">
                            Your browser does not support video playback.
                        </video>
                    </div>
                </div>

                <!-- Minimize All Feature -->
                <div class="special-feature-item">
                    <div class="special-feature-content">
                        <h3 class="special-feature-title">Close or Minimize All Windows</h3>
                        <p class="special-feature-description">Clear your workspace instantly with one click. Hover over an
                            app icon to access options to close or minimize all windows for that application.</p>
                    </div>
                    <div class="special-feature-media">
                        <video autoplay muted loop playsinline>
                            <source src="/resources/minimizeAll.mp4" type="video/mp4">
                            Your browser does not support video playback.
                        </video>
                    </div>
                </div>

                <!-- Click to Minimize Feature -->
                <div class="special-feature-item">
                    <div class="special-feature-content">
                        <h3 class="special-feature-title">Click Dock Icon to Minimize</h3>
                        <p class="special-feature-description">Click any dock icon to instantly hide all windows for that application. Enable this in Settings → General → Advanced → Interaction and Behavior, then toggle "Hide all app windows on dock icon click."</p>
                    </div>
                    <div class="special-feature-media">
                        <video autoplay muted loop playsinline class="align-left">
                            <source src="/resources/clickToMinimize.mp4" type="video/mp4">
                            Your browser does not support video playback.
                        </video>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- Support Section -->
    <section class="support-section section" id="support">
        <div class="container">
            <div class="support-content">
                <h2 class="support-headline">Support Independent Development</h2>
                <p class="support-subheadline">DockDoor is built by a solo developer and kept 100% free.<br>Every contribution directly funds development and keeps the project alive.</p>

                <div class="support-actions">
                    <div class="support-primary">
                        <h3 class="support-title">Help Keep DockDoor Free & Growing</h3>
                        <p class="support-description">Your support funds new features, bug fixes, and ongoing maintenance. No subscriptions, no ads, no data selling—just community support.</p>
                        <a href="donate.html" class="btn btn-coffee btn-large">Support Development</a>
                        <p style="margin-top: 1rem; font-size: 0.9rem; opacity: 0.8;">Even $3 makes a huge difference</p>
                    </div>
                </div>

                <div class="support-alternatives">
                    <h3 class="alternatives-title">Other ways to help</h3>
                    <div class="alternatives-grid">
                        <a href="https://github.com/ejbills/DockDoor" class="alternative-link">
                            <span class="alternative-title">⭐ Star on GitHub</span>
                            <span class="alternative-desc">Help others discover DockDoor</span>
                        </a>
                        <a href="https://github.com/ejbills/DockDoor/issues" class="alternative-link">
                            <span class="alternative-title">🐛 Report Issues</span>
                            <span class="alternative-desc">Help us improve the app</span>
                        </a>
                        <a href="https://crowdin.com/project/dockdoor" class="alternative-link">
                            <span class="alternative-title">🌍 Help Translate</span>
                            <span class="alternative-desc">Make DockDoor global</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Download Section -->
    <section class="download-section section" id="download">
        <div class="container">
            <div class="download-content">
                <h2 class="download-headline">Download DockDoor</h2>
                <p class="download-subheadline">Free for macOS 13 Ventura and later</p>

                <div class="download-actions">
                    <a href="https://github.com/ejbills/DockDoor/releases/latest/download/DockDoor.dmg"
                        class="btn btn-primary btn-large download-btn donation-prompt">Download for Mac</a>
                    <a href="https://formulae.brew.sh/cask/dockdoor"
                        class="btn btn-secondary btn-large download-btn donation-prompt">Install via Homebrew</a>
                </div>

                <div class="download-requirements">
                    <span class="download-requirement">Requires macOS 13.0 or later</span>
                    <span class="download-requirement">Notarized by Apple</span>
                    <span class="download-requirement">Apple Silicon & Intel support</span>
                </div>
                
                <div class="product-hunt-embed">
                    <a href="https://www.producthunt.com/products/dockdoor/reviews?utm_source=badge-product_rating&utm_medium=badge&utm_source=badge-dockdoor" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/product_rating.svg?product_id=1063815&theme=light" alt="DockDoor - &#0032;Window&#0032;peeking&#0032;and&#0032;alt&#0045;tab&#0032;functionality&#0032;for&#0032;macOS&#0032; | Product Hunt" /></a>
                </div>
            </div>
        </div>
    </section>



    <!-- Donation Modal -->
    <div id="donation-modal" class="modal-overlay">
        <div class="modal-content">
            <button class="modal-close" aria-label="Close modal">&times;</button>
            <div class="modal-header">
                <h2 class="modal-title">Love DockDoor?</h2>
            </div>
            <p class="modal-text">DockDoor is built by a solo developer and kept 100% free. If you find it useful, consider supporting development—even $3 helps keep this project alive!</p>
            <div class="modal-actions">
                <a href="donate.html" class="btn btn-primary">Support Development</a>
                <a href="#" id="proceed-to-download" class="btn btn-secondary">Continue to Download</a>
            </div>
        </div>
    </div>
    
    <!-- Toast Container for Donation Request -->
    <div class="toast-container">
        <!-- Toast will be dynamically added here by JavaScript -->
    </div>

    <!-- FAQ Section -->
    <section class="faq-section section" id="faq">
        <div class="container">
            <h2 class="faq-headline">Questions</h2>
            <p class="faq-subheadline">Everything you need to know about DockDoor.</p>

            <div class="faq-grid">
                <details class="faq-item" name="faq-dockdoor">
                    <summary class="faq-question">
                        <p>Where should I download DockDoor from?</p>
                        <i>↓</i>
                    </summary>
                    <div class="faq-answer">
                        <p>Only download DockDoor from <strong>dockdoor.net</strong> or our official GitHub repository. Other sites offering DockDoor downloads are not affiliated with us and should not be trusted.</p>
                        <div class="faq-why">
                            <h4>Why?</h4>
                            <p>We've discovered sketchy re-uploaded versions of DockDoor on various sites that may contain malware or unauthorized modifications. Protect yourself by only using official sources.</p>
                        </div>
                    </div>
                </details>
                
                <details class="faq-item" name="faq-dockdoor">
                    <summary class="faq-question">
                        <p>Is DockDoor free?</p>
                        <i>↓</i>
                    </summary>
                    <div class="faq-answer">
                        <p>Yes. DockDoor is completely free and open-source with no hidden costs or subscriptions.</p>
                        <div class="faq-why">
                            <h4>Why?</h4>
                            <p>Because too many software companies price gouge users, subscriptions are terrible, and we believe great tools should be accessible to everyone.</p>
                        </div>
                    </div>
                </details>

                <details class="faq-item" name="faq-dockdoor">
                    <summary class="faq-question">
                        <p>What are the system requirements?</p>
                        <i>↓</i>
                    </summary>
                    <div class="faq-answer">
                        <p>macOS 13.0 Ventura or later. DockDoor runs natively on both Apple Silicon (M1, M2, M3) and Intel Macs.</p>
                    </div>
                </details>

                <details class="faq-item" name="faq-dockdoor">
                    <summary class="faq-question">
                        <p>Does it affect performance?</p>
                        <i>↓</i>
                    </summary>
                    <div class="faq-answer">
                        <p>No. DockDoor is designed to be lightweight with minimal impact on system performance and battery life.</p>
                    </div>
                </details>

                <details class="faq-item" name="faq-dockdoor">
                    <summary class="faq-question">
                        <p>How do I customize shortcuts?</p>
                        <i>↓</i>
                    </summary>
                    <div class="faq-answer">
                        <p>Open DockDoor settings, go to General, then Advanced Settings to customize your keyboard shortcuts.</p>
                        <div class="keybind-video-container">
                            <video autoplay muted loop playsinline class="keybind-video">
                                <source src="/resources/setKeybind.mp4" type="video/mp4">
                                Your browser does not support video playback.
                            </video>
                        </div>
                    </div>
                </details>

                <details class="faq-item" name="faq-dockdoor">
                    <summary class="faq-question">
                        <p>Which apps are supported?</p>
                        <i>↓</i>
                    </summary>
                    <div class="faq-answer">
                        <p>Most standard macOS applications work perfectly. Some apps with custom UI frameworks may have limited functionality.</p>
                    </div>
                </details>

                <details class="faq-item" name="faq-dockdoor">
                    <summary class="faq-question">
                        <p>How do I get the old slim window appearance back?</p>
                        <i>↓</i>
                    </summary>
                    <div class="faq-answer">
                        <p>In DockDoor versions 1.21 and later, you can restore the dynamic sizing behavior:</p>
                        <div class="faq-steps">
                            <div class="faq-step">
                                <span class="step-number">1</span>
                                <span class="step-text">Open DockDoor settings</span>
                            </div>
                            <div class="faq-step">
                                <span class="step-number">2</span>
                                <span class="step-text">Navigate to the Appearance tab</span>
                            </div>
                            <div class="faq-step">
                                <span class="step-number">3</span>
                                <span class="step-text">Enable "Allow dynamic image sizing" to make windows resize dynamically</span>
                            </div>
                            <div class="faq-step">
                                <span class="step-number">4</span>
                                <span class="step-text">Check "Embed controls in preview frames" for the classic toolbar style</span>
                            </div>
                            <div class="faq-step optional">
                                <span class="step-number">5</span>
                                <span class="step-text">Optional: Disable "Dock styling on traffic light buttons" for minimal appearance</span>
                            </div>
                        </div>
                        <p class="faq-note">These settings only affect dock previews. Window switcher behavior remains unchanged.</p>
                    </div>
                </details>

                <details class="faq-item" name="faq-dockdoor">
                    <summary class="faq-question">
                        <p>How do I troubleshoot issues with debug logging?</p>
                        <i>↓</i>
                    </summary>
                    <div class="faq-answer">
                        <p>DockDoor includes an optional debug logging feature to help diagnose performance issues:</p>
                        <div class="faq-steps">
                            <div class="faq-step">
                                <span class="step-number">1</span>
                                <span class="step-text">Open DockDoor settings → Support tab</span>
                            </div>
                            <div class="faq-step">
                                <span class="step-number">2</span>
                                <span class="step-text">Enable "Debug Logging" under the Updates section</span>
                            </div>
                            <div class="faq-step">
                                <span class="step-number">3</span>
                                <span class="step-text">Reproduce your issue while debug mode is enabled</span>
                            </div>
                            <div class="faq-step">
                                <span class="step-number">4</span>
                                <span class="step-text">Click "Export Logs" to save the debug file to share with support</span>
                            </div>
                        </div>
                        <p class="faq-note">Debug logs are stored locally on your Mac and never sent anywhere automatically. You control when and if logs are shared.</p>
                    </div>
                </details>

                <details class="faq-item" name="faq-dockdoor">
                    <summary class="faq-question">
                        <p>How can I contribute?</p>
                        <i>↓</i>
                    </summary>
                    <div class="faq-answer">
                        <p>Report issues on GitHub, contribute code, help with translations, or support development financially.</p>
                    </div>
                </details>
            </div>
        </div>
    </section>

    <!-- Script -->
    <script src="scripts.js"></script>
</body>

</html>
